<template>
  <md-popup id="popup-container" v-model="value" position="bottom" :has-mask="true" prevent-scroll @hide="cancel">
    <md-popup-title-bar title="出行备注" ok-text="确认" cancel-text="取消" @confirm="confirm" @cancel="cancel"></md-popup-title-bar>
    <div class="container">
      <div class="remark-container">
        <remark-item
          :class="selected.indexOf(item.comboxValue)>-1?'selected':''"
          v-for="(item,index) in getRemarks"
          :key="index"
          :value="item"
          @click.native="itemClick(item)"
        ></remark-item>
      </div>
      <div class="tips gaps">阅读{{type=='1'?'拼车':'包车'}}出行提示选择备注减少司乘纠纷</div>
      <div class="tips" v-if="type=='1'" v-html="pinTips"></div>
      <div class="tips" v-else v-html="baoTips"></div>
    </div>
  </md-popup>
</template>

<script>
import { Popup, PopupTitleBar, Dialog } from 'mand-mobile';
import { GET_REMARKS } from '@/store/actions.types';
import { mapGetters } from 'vuex';
import { SET_PIN_SELECTED_REMARKS, SET_BAO_SELECTED_REAMRKS } from '@/store/mutations.types';
import RemarkItem from './RemarkItem';
export default {
  name: 'remark-selector',
  components: {
    [Popup.name]: Popup,
    [PopupTitleBar.name]: PopupTitleBar,
    [RemarkItem.name]: RemarkItem
  },
  props: {
    value: {
      type: Boolean,
      default: false
    },
    type: {
      // 1:拼车、2:包车
      type: String,
      default: '1'
    },
    appendTo: {
      default: () => document.body
    }
  },
  data() {
    return {
      selected: []
    };
  },
  created() {
    this.$store.dispatch(GET_REMARKS, this.type).then(() => {
      if (this.type === '1') {
        this.selected = this.getPinSelectedRemarks;
      } else {
        this.selected = this.getBaoSelectedRemarks;
      }
    });
  },
  methods: {
    confirm() {
      if (this.type === '1') {
        this.$store.commit(SET_PIN_SELECTED_REMARKS, this.selected);
      } else {
        this.$store.commit(SET_BAO_SELECTED_REAMRKS, this.selected);
      }
      this.value = false;
      this.$emit('submit');
    },
    cancel() {
      this.value = false;
      this.$emit('cancel');
    },
    itemClick(item) {
      let index = this.selected.indexOf(item.comboxValue);
      if (index > -1) {
        this.selected.splice(index, 1);
      } else {
        this.selected.push(item.comboxValue);
      }
    }
  },
  mounted() {
    if (this.appendTo) {
      this.appendTo.appendChild(this.$el);
    }
  },
  beforeDestroy() {
    if (this.appendTo) {
      this.appendTo.removeChild(this.$el);
    }
  },
  computed: {
    ...mapGetters(['getRoute', 'getRemarks', 'getPinSelectedRemarks', 'getBaoSelectedRemarks']),
    pinTips() {
      var str = this.getRoute.pin_tips.replace(/(\\r\\n)|(\\n)/g, '<br>');
      return str;
    },
    baoTips() {
      var str = this.getRoute.bao_tips.replace(/(\\r\\n)|(\\n)/g, '<br>');
      return str;
    }
  }
};
</script>

<style lang="stylus" scoped>
#popup-container {
  .container {
    background-color: #fff;
    padding: 40px 30px;

    .remark-container {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      padding-bottom: 20px;

      .selected {
        color: theme-color;
        border-color: theme-color;
      }
    }

    .tips {
      font-size: 22px;
      color: color-text-caption;
      line-height: 36px;
      white-space: pre-wrap;
    }

    .gaps {
      margin-bottom: 10px;
    }
  }
}
</style>
